<template>
  <div>
    <div class="box_1">
      <div class="box_2">
        <h4>司机即将到达，请避开人群等待</h4>
        <span class="span_1">请往(地点)上车。</span>
        <div class="box_2-1">
          <div class="left">
            <h1>工号9527</h1>
            <span>张师傅正在赶来</span>
          </div>
          <img src="../../assets/quxiao.jpg" />
        </div>
        <div
          style="
            border-top: 1px Black solid;
            height: 20px;
            margin: top 10px;
            color: #f8f8f8;
          "
        ></div>

        <div class="box_3">
          <!-- <van-button tag="span" type="default">暂不取消</van-button> -->
          <!-- <van-button tag="span" type="default" @click="clickJump()"
            >取消订单</van-button
          > -->
          <van-button plain type="primary" tag="span" @click="shang"
            >确认上车</van-button
          >
          <van-button
            plain
            :disabled="bool"
            type="primary"
            tag="span"
            @click="clickJump()"
            >取消订单({{ time }})</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      count: "", // 倒计时
      show: true,
      bool: false,
      times: "",
      time: 10,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    shang() {
      this.time = 0;
      this.$emit("queren", "22");
      // console.log(1);
    },
    //几秒后进入跳转页面
    clickJump() {
      const timejump = 1;
      if (!this.timer) {
        this.count = timejump;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= timejump) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            //跳转的页面写在此处
            this.$router.push({ path: "/queding" });
          }
        }, 1000);
      }
    },
  },
  mounted() {
    this.times = setInterval(() => {
      this.time = this.time - 1;
      console.log(1);
    }, 1000);
  },
  watch: {
    time(newv, oldv) {
      if (newv == 0) {
        console.log(0);
        clearInterval(this.times);
        this.bool = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box_1 {
  width: 100%;
  height: 227px;
  .box_2 {
    width: 300px;
    margin: auto;
    padding: 20px 0;
    h4 {
      text-align: center;
      padding: 10px 0;
    }
    .span_1 {
      font-size: 12px;
      color: red;
      padding: 10px 0;
    }
    .box_2-1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h1 {
        padding: 5px 0;
      }
      span {
        display: block;
        padding-bottom: 10px;
      }
      img {
        width: 70px;
        height: 62px;
        margin-top: -50px;
        float: right;
        margin: 0 auto;
      }
    }
    .box_3 {
      display: flex;
      justify-content: space-between;

      span {
        width: 130px;
        margin: 0 auto;
      }
    }
  }
}
</style>

